<template>
  <div class="location-test-view">
    <div class="page-header">
      <h2>位置解析测试</h2>
      <p>测试GPS定位和逆地理编码功能</p>
    </div>

    <!-- 位置状态显示 -->
    <LocationStatus
      :location="userLocation"
      :loading="locationLoading"
      :error="locationError"
      @refresh="handleLocationRefresh"
    />

    <!-- 手动测试区域 -->
    <el-card class="test-card">
      <template #header>
        <h3>手动测试逆地理编码</h3>
      </template>

      <div class="test-form">
        <el-form :model="testForm" label-width="80px">
          <el-form-item label="纬度">
            <el-input 
              v-model="testForm.latitude" 
              placeholder="例如: 39.9042"
              type="number"
              step="0.0001"
            />
          </el-form-item>
          
          <el-form-item label="经度">
            <el-input 
              v-model="testForm.longitude" 
              placeholder="例如: 116.4074"
              type="number"
              step="0.0001"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              @click="testReverseGeocode"
              :loading="testLoading"
            >
              测试逆地理编码
            </el-button>
            
            <el-button @click="useCurrentLocation">
              使用当前位置
            </el-button>
            
            <el-button @click="usePresetLocations">
              使用预设位置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 测试结果 -->
      <div v-if="testResult" class="test-result">
        <h4>解析结果：</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="城市">{{ testResult.city }}</el-descriptions-item>
          <el-descriptions-item label="省份">{{ testResult.province }}</el-descriptions-item>
          <el-descriptions-item label="国家">{{ testResult.country }}</el-descriptions-item>
          <el-descriptions-item label="区县">{{ testResult.district || '无' }}</el-descriptions-item>
          <el-descriptions-item label="详细地址" :span="2">{{ testResult.address }}</el-descriptions-item>
          <el-descriptions-item label="坐标">{{ testResult.latitude }}, {{ testResult.longitude }}</el-descriptions-item>
          <el-descriptions-item label="数据源">{{ testResult.source }}</el-descriptions-item>
        </el-descriptions>
        
        <!-- 原始数据 -->
        <el-collapse style="margin-top: 16px;">
          <el-collapse-item title="查看原始数据" name="raw">
            <pre>{{ JSON.stringify(testResult, null, 2) }}</pre>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>

    <!-- 预设位置测试 -->
    <el-card class="preset-card">
      <template #header>
        <h3>预设位置测试</h3>
      </template>

      <div class="preset-locations">
        <el-button 
          v-for="preset in presetLocations" 
          :key="preset.name"
          @click="testPresetLocation(preset)"
          :loading="testLoading"
          style="margin: 4px;"
        >
          {{ preset.name }}
        </el-button>
      </div>
    </el-card>

    <!-- IP定位测试 -->
    <el-card class="ip-test-card">
      <template #header>
        <h3>IP定位测试</h3>
      </template>

      <div class="ip-test">
        <el-button 
          type="success" 
          @click="testIPLocation"
          :loading="ipTestLoading"
        >
          测试IP定位
        </el-button>
        
        <div v-if="ipTestResult" class="ip-result">
          <h4>IP定位结果：</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="城市">{{ ipTestResult.city }}</el-descriptions-item>
            <el-descriptions-item label="省份">{{ ipTestResult.province }}</el-descriptions-item>
            <el-descriptions-item label="详细地址" :span="2">{{ ipTestResult.address }}</el-descriptions-item>
            <el-descriptions-item label="数据源">{{ ipTestResult.source }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useLocation } from '@/composables/useLocation'
import { locationAPI } from '@/api'
import LocationStatus from '@/components/LocationStatus.vue'

// 使用地理位置组合式API
const {
  location: userLocation,
  loading: locationLoading,
  error: locationError,
  getCurrentLocation,
  refreshLocation
} = useLocation({ autoLoad: true, showMessage: true })

// 测试表单
const testForm = reactive({
  latitude: '',
  longitude: ''
})

const testLoading = ref(false)
const testResult = ref(null)
const ipTestLoading = ref(false)
const ipTestResult = ref(null)

// 预设位置
const presetLocations = [
  { name: '北京天安门', latitude: 39.9042, longitude: 116.4074 },
  { name: '上海外滩', latitude: 31.2397, longitude: 121.4997 },
  { name: '广州塔', latitude: 23.1084, longitude: 113.3244 },
  { name: '深圳平安大厦', latitude: 22.5431, longitude: 114.0579 },
  { name: '杭州西湖', latitude: 30.2741, longitude: 120.1551 },
  { name: '成都春熙路', latitude: 30.6598, longitude: 104.0633 }
]

// 处理位置刷新
const handleLocationRefresh = async () => {
  try {
    await refreshLocation()
    ElMessage.success('位置刷新成功')
  } catch (error) {
    console.error('刷新位置失败:', error)
    ElMessage.error('刷新位置失败')
  }
}

// 测试逆地理编码
const testReverseGeocode = async () => {
  if (!testForm.latitude || !testForm.longitude) {
    ElMessage.warning('请输入纬度和经度')
    return
  }

  testLoading.value = true
  try {
    const response = await locationAPI.reverseGeocode(
      parseFloat(testForm.latitude),
      parseFloat(testForm.longitude)
    )
    testResult.value = response.data
    ElMessage.success('逆地理编码成功')
  } catch (error) {
    console.error('逆地理编码失败:', error)
    ElMessage.error('逆地理编码失败: ' + error.message)
  } finally {
    testLoading.value = false
  }
}

// 使用当前位置
const useCurrentLocation = () => {
  if (userLocation.value) {
    testForm.latitude = userLocation.value.latitude?.toString() || ''
    testForm.longitude = userLocation.value.longitude?.toString() || ''
  } else {
    ElMessage.warning('当前位置不可用')
  }
}

// 使用预设位置
const usePresetLocations = () => {
  const beijing = presetLocations[0]
  testForm.latitude = beijing.latitude.toString()
  testForm.longitude = beijing.longitude.toString()
}

// 测试预设位置
const testPresetLocation = async (preset) => {
  testForm.latitude = preset.latitude.toString()
  testForm.longitude = preset.longitude.toString()
  await testReverseGeocode()
}

// 测试IP定位
const testIPLocation = async () => {
  ipTestLoading.value = true
  try {
    const response = await locationAPI.getLocationByIP()
    ipTestResult.value = response.data
    ElMessage.success('IP定位成功')
  } catch (error) {
    console.error('IP定位失败:', error)
    ElMessage.error('IP定位失败: ' + error.message)
  } finally {
    ipTestLoading.value = false
  }
}
</script>

<style scoped>
.location-test-view {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h2 {
  color: #409eff;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  margin: 0;
}

.test-card,
.preset-card,
.ip-test-card {
  margin-bottom: 20px;
}

.test-form {
  margin-bottom: 20px;
}

.test-result,
.ip-result {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.test-result h4,
.ip-result h4 {
  margin: 0 0 12px 0;
  color: #303133;
}

.preset-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .location-test-view {
    padding: 16px;
  }
  
  .preset-locations {
    justify-content: center;
  }
}
</style>
